<template>
    <div class="shader-page">
        <div class="shader-page-title">Shader</div>
        <ShaderComponent :vertexShader="vertexShader" :fragmentShader="fragmentShader"></ShaderComponent>
    </div>
</template>
<script>
import ShaderComponent from '@/components/ShaderComponent.vue';

export default {
  name: 'ShaderPage',
  components: {
    ShaderComponent
  },
}
</script>

<script setup>
const vertexShader = `
  varying vec2 vUv;
  void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`

const fragmentShader = `  
  varying vec2 vUv;
  void main() {
    // 背景是紫色，只有0.4~0.6之间渐变到红色
    gl_FragColor = vec4(vUv.x, vUv.y, 1.0, 1.0);
    gl_FragColor.r += 0.4;
    gl_FragColor.g += 0.4;
  }
`
</script>